layui.use(['jquery', 'febs', 'form',  'commonJS'], function () {
    var $ = layui.jquery,
        febs = layui.febs,
        form = layui.form,
        commonJS = layui.commonJS,
        $resource = $('#resource'),
        $using = $('#using'),
        $weidu=$('#weidu'),
        tableIns;
     initResourceOptions($resource,resourceListData, "");
     initResourceUsing();
        inintChar();
       getShipReport();
    var colors = ['#00BFFF', '#DAA520'];

       function  inintChar(){
           var resourceid=$resource.val();
           var weidu=$weidu.val();
           getResourcePlan(resourceid,weidu);
       }


    function   initResourceUsing(){
        $using.empty();
        var  str="";
        resourceListData.forEach(item=>{
           str=str+'<div class="dashboard-stats2 tooltip">';
            str=str+ ' <div class="dashboard-stats-item" style="background-color: #00BFFF; ">';
            if(item.rsStatus==2){
                str=str+'<h2 class="m-top-none"  style="color:#F02020"' +
                    ' title="停用时间从'+item.stopStartTime+'至'+item.stopStartTime
            +',原因:'+item.stopReason+'">'+item.rsStatusName +'</h2>';
            }else {
             str=str+' <h2 class="m-top-none">'+item.rsStatusName+'</h2>';
            }
            str=str+' <h52>'+item.rsName+'</h52>' +
                '  <div class="stat-icon2">'+
                ' <i class="fa fa-ship fa-3x" style="font-size:3em !important;"></i>' +
                ' </div></div></div>';
        });
        $using.append(str);
    }


      function  getResourcePlan(resourceid,weidu){
        var   condition={resourceid:resourceid,weidu:weidu} ;
       var data= getData(ctx +"home/resourceData",condition);
          var myChart001 = echarts.init(document.getElementById('myChart001'));
          var option = {
              color: colors,
              title: {
                  text: '资源档期负荷情况',
                  subtext: '统计未来半年以内每周各资源被预约的天数'
              },
              grid: {
                  left: '2%',
                  right: '2%',
                  bottom: '3%',
                  containLabel: true
              },
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                      type: 'cross',
                      crossStyle: {
                          color: '#999'
                      }
                  }
              },
              toolbox: {
                  feature: {
                      magicType: { show: true, type: ['line', 'bar'] },
                      restore: { show: true },
                      saveAsImage: { show: true }
                  }
              },
              xAxis: {
                  name:weidu,
                  type: 'category',
                  data: data.weeks,
              },
              yAxis: {
                  type: 'value',
                  min: 0,
                  interval: 5,
                  axisLine: {
                  },
                  axisLabel: {
                      formatter: '{value} '
                  }
              },
              dataZoom: [
                  {
                      show: true,
                      start: 10,
                      end: 80
                  }
              ],
              series: [
                  {
                      name: '已排期天数',
                      type: 'bar',
                      stack: '排期情况',
                      data: data.workday,
                      label: {
                          normal: {
                              show: true
                          }
                      }
                  },
                  {
                      name: '可预约天数',
                      type: 'bar',
                      stack: '排期情况',
                      itemStyle: { color: 'rgba(0, 255, 127, 0.4)' },
                      data: data.unworkday,
                      label: {
                          normal: {
                              show: true
                          }
                      }
                  }
              ]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart001.setOption(option);
      }


      function   getShipReport(){
          // 船模加工工作量统计
          var data= getData(ctx +"home/shipData",{});
          var myChart003= echarts.init(document.getElementById('myChart003'));
          // 指定图表的配置项和数据
          var option = {
              color: colors,
              title: {
                  text: '船模加工数量统计',
                  subtext: '统计一年以内的每月加工船模的数量'
              },
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                      type: 'cross',
                      crossStyle: {
                          color: '#999'
                      }
                  }
              },
              toolbox: {
                  feature: {
                      magicType: { show: true, type: ['line', 'bar'] },
                      restore: { show: true },
                      saveAsImage: { show: true }
                  }
              },
              xAxis: {
                  type: 'category',
                  data: data.yearMonth,
              },
              yAxis: {
                  type: 'value',
                  min: 0,
                  interval: 5,
                  axisLine: {
                  },
                  axisLabel: {
                      formatter: '{value} '
                  }
              },
              dataZoom: [
                  {
                      show: true,
                      start: 10,
                      end: 80
                  }
              ],
              series: [
                  {
                      name: '船模',
                      type: 'line',
                      data: data.num,
                      label: {
                          normal: {
                              show: true,
                              position: 'top'
                          }
                      }
                  }
              ]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart003.setOption(option);

      }


    function   getData(url,condition){
        var result={};
        $.ajax({
            type: "get",
            dataType: "json",
            url: url,
            data: condition,
            cache: false,
            async: false,
            success: function (data) {
                result = data || {};
            },
        });
        return result;
    }


      $resource.on('change',function (data){
       var  resourceid=   data.target.value;
        var  weidu=$weidu.val();
        getResourcePlan(resourceid,weidu);

      });

      $weidu.on('change',function (data){
          var resourceid=$resource.val();
          var weidu=data.target.value;
          getResourcePlan(resourceid,weidu);
       });
    $resource.on('change',function (data){
        console.log(data.target.value);
       });



    function initResourceOptions(element, data,  callBack) {
        $(element).empty();
        $(element).append(`<option value="">请选择</option>`);
        if (data != null && data.length > 0) {
            var i=0;
            data.forEach(item => {
                if (i==0) {
                    element.append(`<option value="${item.id}"  selected>${item.rsName}</option>`)
                } else {
                    element.append(`<option value="${item.id}" >${item.rsName}</option>`)
                }
                i++;
            });
        }
        if (typeof (callBack) === "function") {
            callBack(result);
        }
        layui.form.render('select');
    }




});